<template>
	<div class="box">
		<van-tabs v-model="active" sticky swipeable>
			<van-tab title="选择门店" to="/mendian"></van-tab>
			
			<van-tab title="首页">
				<header>
					<img src="../assets/md.jpg" alt="">
				</header>
				<section>
					<div class="brand">
						<div>
							<span><img src="../assets/brand.gif" alt=""></span>
							<h2>五色糖佳和店</h2>
						</div>
						<div>
							<p>山东省菏泽市巨舒显便和购物广昌一楼五色糖专柜</p><span><img src="../assets/huiyuan.gif" alt=""></span>
						</div>
					</div>
					<article>
						<h3>
							<p><span>甜甜圈精选</span><span>他们他们都在用</span></p>
							<p><a @click="fashion">MORE <span class="iconfont icon-youjiantou"></span></a></p>
						</h3>
						<div class="kouhong">
							<div><img src="../assets/kouhong.gif" alt="" @click="fashion"></div>
							<div>
								<h4><img src="../assets/touxiang.gif" alt=""><span>小可树</span></h4>
								<p>超级显肤色，超级好看哦！</p>
							</div>
						</div>
						<div class="kouhong">
							<div><img src="../assets/kouhong.gif" alt="" @click="fashion"></div>
							<div>
								<h4><img src="../assets/touxiang.gif" alt=""><span>小可树</span></h4>
								<p>超级显肤色，超级好看哦！</p>
							</div>
						</div>
						<div class="kouhong">
							<div><img src="../assets/kouhong.gif" alt="" @click="fashion"></div>
							<div>
								<h4><img src="../assets/touxiang.gif" alt=""><span>小可树</span></h4>
								<p>超级显肤色，超级好看哦！</p>
							</div>
						</div>
					</article>
					<aside>
						<div class="biaoti">
							<h5>热卖商品</h5><span class="iconfont icon-youjiantou"></span>
						</div>
						<van-grid :border="false" :column-num="2">
							<van-grid-item :gutter="10" v-for="item in list" @click="tap(item._id)" class="sp">
								<van-image :src="item.coverImg" />
								<div class="desc">
									<!-- <p>{{item.name}}</p> -->
									<p class="name">{{item.name}}</p>
									<p class="price"> ￥ {{item.price}}</p>
									<van-icon name="shopping-cart-o" @click.stop="add(item._id)" />
								</div>
							</van-grid-item>
						</van-grid>
					</aside>
				</section>
				<p class="iconfont icon-wpicon-shangjiantou" v-if="scrollY" @click="backTop"></p>
			</van-tab>
			
			<van-tab title="分类">
				<div class="fenlei">
					<div class="biaoti" @click="fashion">
						<h5>彩妆类</h5><span class="iconfont icon-youjiantou"></span>
					</div>
					<div class="btn">
						<div><button @click="fashion">底妆</button>
							<button @click="fashion">底妆</button></div>
						<div><button @click="fashion">底妆</button>
							<button @click="fashion">底妆</button></div>
						<div><button @click="fashion">底妆</button>
							<button @click="fashion">底妆</button></div>
					</div>

					<div class="biaoti" @click="fashion">
						<h5>面部护肤</h5><span class="iconfont icon-youjiantou"></span>
					</div>
					<div class="btn">
						<div><button @click="fashion">精华</button>
							<button @click="fashion">精华</button></div>
						<div><button @click="fashion">精华</button>
							<button @click="fashion">精华</button></div>
						<div><button @click="fashion">精华</button>
							<button @click="fashion">精华</button></div>
					</div>

				</div>

			</van-tab>
			<van-tab title="活动" calss="only">
				<h6>暂无活动~</h6>
			</van-tab>

		</van-tabs>

	</div>

</template>

<script>
	import * as api from '../api/getProlist'
	export default {
		name: 'MdDetail',
		data() {
			return {
				active: 1,
				list: [],
				value: '',
				scrollY: ''
			};
		},
		mounted() {
			this.$emit('toparent', this.title)
			window.addEventListener('scroll', this.scrollToTop)
			api.getProlist({
				per: 50,
				page: 1,
				name: '朵色',
				product_category: [],
			}).then((data) => {
				this.list = data.data.products
			})
		},
		destroyed () {
		  window.removeEventListener('scroll', this.scrollToTop)
		},
		methods: {
			// 点击回到顶部方法，加计时器是为了过渡顺滑
			  backTop () {
			    const that = this
			    let timer = setInterval(() => {
			      let ispeed = Math.floor(-that.scrollTop / 5)
			      document.documentElement.scrollTop = document.body.scrollTop = that.scrollTop + ispeed
			      if (that.scrollTop === 0) {
			        clearInterval(timer)
			      }
			    }, 16)
			},
			// 为了计算距离顶部的高度，当高度大于60显示回顶部图标，小于60则隐藏
			  scrollToTop () {
			    const that = this
			    let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
			    that.scrollTop = scrollTop
			    if (that.scrollTop > 200) {
			      that.scrollY = true
			    } else {
			      that.scrollY = false
			    }
			},
			fashion() {
				this.$router.push('/fashion')
			},
			tap(id) {
				this.$router.push('/detail/' + id)
			},
			add(id) {
				console.log(id)
				if (!localStorage.getItem('token')) {
					this.$toast('请先登录')
					this.$router.push('/login')
				} else {
					api.getAddcart({
						product: id,
						quantity: 1,
					}).then((data) => {
						console.log(data)
						console.log(id)
						this.$toast('加入购物车成功')
					})
				}
			}
		},
	}
</script>

<style scoped="">
	.icon-wpicon-shangjiantou {
		font-size: 20px;
		position: fixed;
		bottom: 60px;
		right: 30px;
		color: #fff;
		text-align: center;
		line-height: 30px;
		width: 30px;
		height: 30px;
		border-radius: 50%;
		background: #666;
		opacity: 0.7;
	}

	.van-tabs--line .van-tabs__wrap .van-tabs__nav--line {
		width: 240px;
		position: absolute;
		top: 0;
		left: 0;
	}

	h6 {
		margin-top: 50%;
		text-align: center;
		font-size: 12px;
		font-weight: normal;
		color: #999;
	}

	header {
		width: 100%;
		height: 104px;
	}

	header img {
		width: 100%;
		height: 100%;
	}

	.box {
		margin-bottom: 50px;
	}

	div,
	p {
		margin: 0;
	}

	.brand {
		position: relative;
	}

	.brand div:nth-of-type(1) {
		height: 55px;
	}

	.brand div:nth-of-type(1) span {
		display: block;
		position: absolute;
		width: 81px;
		height: 82px;
		top: -27px;
		left: 20px;
	}

	.brand div:nth-of-type(1) img {
		width: 100%;
		height: 100%;
	}

	.brand h2 {
		text-align: center;
		color: #4e4e4e;
	}

	.brand div:nth-of-type(2) {
		display: flex;
		height: 48px;
		padding-left: 16px;
	}

	.brand div:nth-of-type(2) p {
		width: 216px;
		font-size: 12px;
		color: #a7acad;
	}

	.brand div:nth-of-type(2) span {
		width: 80px;
		height: 50px;
		position: absolute;
		bottom: 0;
		right: 0;
	}

	.brand div:nth-of-type(2) span img {
		width: 100%;
		height: 100%;
	}

	article {
		border-bottom: 9px solid #eff3f6;
	}

	article h3 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 67px;
		padding: 0 10px;
	}

	article h3 p:nth-of-type(1) span {
		display: block;
		font-size: 12px;
	}

	article h3 p:nth-of-type(1) span:nth-of-type(1) {
		color: #333;
	}

	article h3 p:nth-of-type(1) span:nth-of-type(2) {
		color: #666;
	}

	article h3 p:nth-of-type(2) a {
		color: #666;
	}

	.kouhong {
		padding: 10px;
		height: 98px;
		display: flex;
		justify-content: space-between;
	}

	.kouhong div:nth-of-type(1) {
		width: 142px;
		height: 98px;
	}

	.kouhong div:nth-of-type(1) img {
		width: 100%;
		height: 100%;
	}

	.kouhong div:nth-of-type(2) {
		width: 146px;
		height: 98px;
		color: #949598;
		font-size: 9px;
	}

	.kouhong div:nth-of-type(2) h4 {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		font-size: 12px;
	}

	.kouhong div:nth-of-type(2) h4 img {
		width: 43px;
		height: 43px;
		border-radius: 50%;
		display: block;
	}

	.kouhong div:nth-of-type(2) h4 span {
		margin-left: 10px;
		color: #434343;
	}

	.biaoti {
		display: flex;
		padding: 0 14px;
		height: 43px;
		justify-content: space-between;
		align-items: center;
		font-size: 12px;
	}

	.biaoti h5 {
		font-size: 12px;
	}

	.desc p {
		font-size: 12px;
	}

	.btn div {
		width: 100%;
		height: 44px;
		display: flex;
		justify-content: space-around;
		align-content: center;
	}

	.fenlei button {
		width: 133px;
		height: 35px;
		background: #eff3f6;
		padding-left: 10px;
		color: #9ca1a4;
		border: 0;
		margin: 5px 0;
		border-radius: 3px;
		font-size: 12px;
	}

	.fenlei h5 {
		display: flex;
		padding: 0 14px;
		height: 43px;
		justify-content: space-between;
		align-items: center;
		font-size: 12px;
	}

	.van-icon {
		font-size: 16px;
		width: 24px;
		height: 24px;
		border: 1px solid #d5616e;
		border-radius: 50%;
		text-align: center;
		line-height: 24px;
		background: #d5616e;
		color: #efd1d1;
		position: absolute;
		right: 13px;
		bottom: 20px;
	}

	.price {
		color: #d88694;
		font-size: 12px;
		height: 36px;
		line-height: 36px;
	}

	.name {
		width: 130px;
		font-size: 10px;
		height: 38px;
		line-height: 38px;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}

	.sp {
		border-right: 2px solid #f9f9f9;
		border-bottom: 2px solid #f9f9f9;
	}

	.sp:nth-of-type(1),
	.sp:nth-of-type(2) {
		border-top: 1px solid #f9f9f9;
	}

	.sp:nth-of-type(even) {
		border-right: 0;
	}

	.van-image {
		width: 135px;
		height: 150px;
	}
</style>
